 <route lang="json5"  >
 {
   layout: 'default',
   style: { 
     navigationBarTitleText: '产品详情',
   },
 }
 </route>
 
<template>
	<view class="u-page"  style="padding-top:0;height: 250px;background-image: linear-gradient(#1b90ff, #ffffff);">
		 
		<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="5000" :duration="500">
		  <swiper-item v-for="(item, index) in house.img" :key="index" @click="toViewPic(index)" >
		    <image :src="item" mode="aspectFit"  ></image>
		  </swiper-item>
		 </swiper>  
		<view style="background-color: #f7f7f7;padding:30upx;font-size:16px;"> 
			<view class="inline-container"> 
				 <view class="inline-item">产品名称:</view> <view class="inline-item">{{house.productname}} </view>
			  </view>
			  <view class="inline-container"> 
			  	 <view class="inline-item">产品型号:</view> <view class="inline-item">{{house.productModel}} </view>
			    </view>
			<view class="inline-container"> 
				 <view class="inline-item">产品类型:</view> <view class="inline-item">{{house.producttype}} </view>
			  </view> 
			<view class="inline-container">
				 <view class="inline-item">产品状态:</view> <view class="inline-item">{{house.isavailable}} </view>
			  </view> 
		<view class="inline-container">
			 <view class="inline-item">产品简介:</view> <view class="inline-item">{{house.productdetails}} </view>
		  </view> 
		 
			<view style="margin-bottom:50upx;">
				 <view class="inline-item">产品详情:</view>
				  <view  > 
					  <rich-text  :nodes="house.achievementcontent" />
				  </view>
			  </view> 
			 
			 
		</view>
		 
	</view>
</template>

<script>
	import {http} from '@/utils/http' 
	export default {
		data() {
			 
			return { 
				house:{id:'1',title:'',createTime:'2021-11-21',
				   content:'<p> </p>'
				   },
				   tagStyle: {
				   	p: 'color: #606266; line-height: 24px;'
				   },
				id:''
			}
		},
		onLoad(options){
			this.id=options.id;
			console.log(this.id)
			uni.showLoading({
				title:'正在加载...'
			})
			http.get("/api/product/queryById",{id:this.id}).then(res=>{
				uni.hideLoading()
				console.log(res)
				if(res.result.imageurl){
				  var imgsArr=res.result.imageurl.split(",")
				  for(var i=0;i<imgsArr.length;i++){
					imgsArr[i]=getApp().globalData.imgUrl+ imgsArr[i];
				  }
				  res.result.img=imgsArr;
				  
				}else{
				  res.result.img=["/static/images/nopic.png"];
				}
				 if(res.result.achievementcontent){
					 res.result.achievementcontent=res.result.achievementcontent.replace(/&mdash;/g, '\u2014') // 替换为 em dash
            .replace(/&amp;/g, '&')
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>');
				 }
				this.house=res.result;
			})
		},
		mounted(){
			//this.toGetInfo()
			 
		},
		methods: { 
			 
		}
	}
</script>

<style  lang="scss" scoped>
	@import '@/common/uni-ui.scss';
	
	.swiper {
	  height: 375upx;
	  flex: none;
	  image,
	  video {
	    width: 100%;
	    display: block;
	    height: 100%;
	    margin: 0;
	  }
	  :deep(.uni-swiper-dot) {
	    transition: all 400ms ease;
	    background-color: rgba(255, 255, 255, 0.4);
	    width: 5px;
	    height: 5px;
	    border-radius: 50%;
	    margin: 0 4px;
	  }
	  :deep(.uni-swiper-dot-active) {
	    background-color: rgba(255, 255, 255, 1);
	    width: 16px;
	    border-radius: 2px;
	  }
	}
   .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 70rpx;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;padding:10rpx;font-size:0.9em;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
	
	::v-deep img{
			 width: 100%!important;
	}
	 
	 
	.inline-container {
	    /* 消除inline-block间隙 */
		display: inline-block;
		width:100%;
	}
	
	.inline-item {
	  display: inline-block;
	  font-weight: bold; 
	  vertical-align: middle;  /* 垂直对齐 */ 
	  margin-right: 20upx;
	}
	
	.inline-item:last-child {
		font-weight: normal; 
	  margin-right: 0;
	}
	 
</style>
